<template>
  <div class="topbar">
    <transition name="fade">
      <div v-show="flag" class="topbar_user">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psboy93urqyuwfvky48tb1brow7fww2zlwme2a5652f-7c01-4bfc-8b00-5983cac40359"
          alt=""
        />
        <span>岁寒</span>
      </div>
    </transition>
    <div class="header_icon">
      <div class="headerbox">
        <img
          @click="scan"
          src="@/assets/imgs/user_colin/扫一扫@3x.png"
          alt=""
        />
        <img
          @click="show = true"
          src="@/assets/imgs/user_colin/二维码@3x.png"
          alt=""
        />
        <img src="@/assets/imgs/user_colin/聊天@3x.png" alt="" />
        <img src="@/assets/imgs/user_colin/设置@3x.png" alt="" />
      </div>
    </div>
  </div>
  <div class="slot"></div>
  <div class="user">
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <header>
        <div class="header_user">
          <img
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psboy93urqyuwfvky48tb1brow7fww2zlwme2a5652f-7c01-4bfc-8b00-5983cac40359"
          />
          <div class="name">
            <span class="name_1">岁寒</span>
            <div class="name_2">
              <span class="text_2">会员用户</span>
              <span class="text_3">钱包</span>
            </div>
          </div>
        </div>
        <div class="lefthome">
          <p>个人主页</p>
        </div>
      </header>
      <nav>
        <div class="navbox box610">
          <div class="navbox-1">
            <p>创作&nbsp;&nbsp;<i>0</i></p>
          </div>
          <div class="navbox-1">
            <p>关注&nbsp;&nbsp;<i>0</i></p>
          </div>
          <div class="navbox-1">
            <p>收藏&nbsp;&nbsp;<i>0</i></p>
          </div>
          <div class="navbox-1">
            <p>足迹&nbsp;&nbsp;<i>0</i></p>
          </div>
        </div>
      </nav>
      <div class="group_1">
        <div class="group_1_box">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4f01v51at9tta1decrme86v9gqcbuf7f22087b4-7836-4cd6-ab10-408c1c654f12"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pszxd5kyngx0ie86vfy1ddgu6g6ovz2mboi2c761088-f412-4bec-af23-a55ee2089c69"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvi17id1mtsc5ax1l6uvvxbhz9smqkas1402e4b37-caef-4953-91a8-4d25fb1c2b27"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psf1ii74rexmnlnw96uhqay8du0yip9ktz6756a2fe7-2cf0-426f-ba20-66d7f2811499"
          />
        </div>
      </div>
      <div class="line"></div>
      <section>
        <p>备婚小助手</p>
        <div class="section_box">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psoaemz4zc5m2tx89nj1ozeu4g6cquttkd337f381-e72b-4b9d-996b-f110510d801c"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psu0iknbx4ilayirx5vnh1gojv1m9ist17f4a9112-1a29-4027-9225-cde2495fca69"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psu23k244rq1z8szju6zmro8iuvy0vcu55a25250-037f-4b8d-b2f0-7ddd6e8edd9b"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pspt06bc1vn2q5qa2jk6083d10l2rywxw8gj5401c42c-0feb-4818-b2ac-a2db617a0f59"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps7loz2meefipjg3mxkuhncq3hmsw98mo4p1b85dfee-4a43-422d-976f-aefa89d17124"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps10qzbcwyg6o81uwjsxe31jt6bfyu5zn6on61fd050d-6a30-4e9f-9747-a9fe383dddd5"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psgpp0lzx8ze9vbf0uh6dsziyh6pt7xfub67c5a44-9573-4c70-98cf-82bfe243faad"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pshhl866joudc7rzlvj2dwq28s4068d9ctg0f9b29bd-0808-45e4-9b7c-600c0cc1073f"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps36ud4b5keobkdskwgbxlcrfrqc17gpai4f16f40a3-6128-4693-978e-8e2d61fd87eb"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psbnmwiiutx7i8w1zpio6q63jaaiy8biql1c2835f9-9d76-4239-aa00-c314fb9cd9ef"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psanlca0s3gmb9zgu5mjubkg5cfmkisztzia6b602fe-6e6c-427d-b167-dde1a26f64ca"
          />
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjbbdsn05uim7v8lf1o49ds1e8nykwgt2r18f59bd9-9f99-47c6-a4dd-be62a88b17ab"
          />
        </div>
      </section>
      <div class="content">
        <p class="fine_goods">精选商品</p>
        <div class="content_box">
          <div class="goods">
            <img
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psm4wn7osx7idsfk5rbps02qh6a47932qvpd6cd1bf9-014d-4a53-b641-bb933573eba2"
              alt=""
            />
            <p>梦幻之城婚戒-城堡</p>
            <span>查看详情</span>
          </div>
          <div class="goods">
            <img
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psm4wn7osx7idsfk5rbps02qh6a47932qvpd6cd1bf9-014d-4a53-b641-bb933573eba2"
              alt=""
            />
            <p>梦幻之城婚戒-城堡</p>
            <span>查看详情</span>
          </div>
          <div class="goods">
            <img
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psm4wn7osx7idsfk5rbps02qh6a47932qvpd6cd1bf9-014d-4a53-b641-bb933573eba2"
              alt=""
            />
            <p>梦幻之城婚戒-城堡</p>
            <span>查看详情</span>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
  <!-- 二维码扫一扫 -->
  <div>
    <van-dialog v-model:show="show">
      <img class="zhuanqian" src="@/assets/imgs/user_colin/erweima.jpg" />
      <p class="zhengqian">扫一扫向我转账</p></van-dialog
    >
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      isLoading: true, //刷新状态
      show: false, //二维码
      flag: false, //控制头像和用户名滚动
      scrollTop: "", //监听滚动条滚动值
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    scan() {
      //扫一扫功能
      Dialog.alert({
        message: "本功能暂不支持使用",
        theme: "round-button",
      });
    },
    //下拉刷新  需要调接口
    onRefresh() {
      console.log("1");
      this.isLoading = false;
    },
    //监听滚动条滚动
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(this.scrollTop);
      if (this.scrollTop > 50) {
        //控制标题名的出现消失
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
  },
  //很重要，更换组件时销毁这个监听滚动事件
  unmounted() {
    window.removeEventListener("scroll", this.handleScroll);
    // console.log("组件销毁，handlerScroll不再运行");
  },
};
</script>
<style lang="scss" scoped>
/* 从隐藏到显示 */
/* enter-from 进场起点 */
/* enter-active 进场过程 */
/* 从显示到隐藏 */
/* leave-to 离场终点 */
/* leave-active 离场过程 */
.fade-enter-from {
  opacity: 0;
  transform: translateY(0.5rem);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}
.fade-leave-to {
  opacity: 0;
  transform: translateY(0.2rem);
}
.box610 {
  width: 6.1rem;
  margin: 0 auto;
}
.topbar {
  position: fixed;
  top: 0;
  width: 7.5rem;
  height: 1.5rem;
  z-index: 99999;
  background-color: #d58484;
  .topbar_user {
    margin-top: 0.45rem;
    margin-left: 0.7rem;
    img {
      display: inline-block;
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
      //使用固定位移动画展示会bug
      // position: absolute;
      // left: 0.6rem;
      // bottom: 0.1rem;
    }
    span {
      display: inline-block;
      margin-left: 0.25rem;
      font-size: 0.14rem;
      padding-bottom: 0.2rem;
      // position: absolute;
      // left: 1.3rem;
      // bottom: 0.1rem;
    }
  }
  .header_icon {
    position: absolute;
    right: 0.4rem;
    top: 1rem;
    .headerbox {
      width: 2.7rem;
      display: flex;
      justify-content: space-between;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
}
.slot {
  height: 1.48rem;
}
header {
  position: relative;
  width: 100%;
  height: 1.5rem;
  background-color: #d58484;
  .header_user {
    img {
      border-radius: 50%;
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
      position: absolute;
      left: 0.45rem;
      bottom: 0.45rem;
    }
    .name {
      position: absolute;
      left: 1.3rem;
      bottom: 0.45rem;
      .name_1 {
        width: 1.34rem;
        height: 0.27rem;
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .name_2 {
        height: 0.21rem;
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        .text_3 {
          padding-left: 0.2rem;
        }
      }
    }
  }
  .lefthome {
    position: absolute;
    right: 0;
    bottom: 0.95rem;
    width: 1.29rem;
    height: 0.3rem;
    background: #ef9b9b;
    border-radius: 0.15rem 0rem 0rem 0.15rem;
    p {
      text-align: center;
      height: 0.21rem;
      font-size: 0.22rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
}
nav {
  position: absolute;
  left: 0;
  top: 1.3rem;
  left: 0.7rem;
  .navbox {
    display: flex;
    justify-content: space-between;
    height: 0.4rem;
    .navbox-1 {
      border-radius: 0.1rem;
      width: 1rem;
      font-size: 0.14rem;
      text-align: center;
      background-color: #f48787;
      line-height: 0.4rem;
    }
  }
}
.group_1 {
  padding: 0.8rem 0 0.35rem;
  .group_1_box {
    width: 5.7rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    img {
      width: 0.65rem;
      height: 0.9rem;
    }
  }
}
.line {
  width: 6.9rem;
  height: 0.01rem;
  margin: 0 auto;
  background: rgba(44, 44, 44, 0.1);
}
section {
  width: 6rem;
  margin: 0 auto;
  p {
    padding-top: 0.3rem;
    height: 0.27rem;
    font-size: 0.28rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 0.27rem;
  }
  .section_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.55rem;
    img {
      width: 0.85rem;
      height: 0.85rem;
      margin-bottom: 0.4rem;
    }
    img:nth-child(1),
    img:nth-child(5),
    img:nth-child(9) {
      margin-right: 0.8rem;
    }
    img:nth-child(4),
    img:nth-child(8),
    img:nth-child(12) {
      margin-left: 0.8rem;
    }
    img:nth-child(2),
    img:nth-child(6),
    img:nth-child(10) {
      margin-right: 0.8rem;
    }
  }
}
.content {
  // padding-top: .17rem;
  .fine_goods {
    height: 0.27rem;
    font-size: 0.28rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: center;
    line-height: 0.27rem;
    margin-bottom: 0.2rem;
  }
  .content_box {
    width: 5.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .goods {
      position: relative;
      margin: 0.1rem 0;
      width: 2.5rem;
      height: 3.3rem;
      img {
        width: 100%;
        height: 100%;
      }
      p {
        position: absolute;
        bottom: 0.55rem;
        left: 0.25rem;
        height: 0.23rem;
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      span {
        position: absolute;
        bottom: 0.08rem;
        left: 0.75rem;
        display: block;
        width: 1rem;
        height: 0.35rem;
        background: #d84141;
        border: 0rem solid #ffffff;
        border-radius: 0.1rem;
        font-size: 0.12rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 0.35rem;
        text-align: center;
      }
    }
  }
}
.zhuanqian {
  margin-top: 0.3rem;
  display: block;
  margin-left: 20%;
  width: 4rem;
  height: 4rem;
}
.zhengqian {
  text-align: center;
}
</style>
